<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>项目管理系统</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="main-container">
        <!-- 左侧主导航栏 -->
        <div class="main-sidebar">
            <div class="nav-item active" data-type="research">科研</div>
            <div class="nav-item" data-type="study">学习</div>
            <div class="nav-item" data-type="competition">比赛</div>
            <div class="nav-item" data-type="development">开发</div>
            <div class="nav-item" data-type="other">其他</div>
        </div>

        <!-- 右侧内容区 -->
        <div class="content-wrapper">
            <!-- 项目列表侧栏 -->
            <div class="project-sidebar">
                <div class="project-item active">ADL3-313 OOD Det</div>
                <div class="project-item">项目 2</div>
                <div class="project-item">项目 3</div>
            </div>

            <!-- 项目详情区域 -->
            <div class="project-content">
                <!-- 原有的内容放在这里 -->
                <div class="container">
                    <div class="project-header">
                        <div class="project-title">
                            <h1>ADL3-313 OOD Det</h1>
                            <div class="project-tags">
                                <span class="tag">项目类型: 算法研发</span>
                            </div>
                        </div>
                        <div class="action-buttons">
                            <button class="btn add-member">加入项目</button>
                            <button class="btn new-project">新建项目</button>
                        </div>
                    </div>

                    <div class="project-status">
                        <div class="status-select">
                            <label>项目状态</label>
                            <select>
                                <option>In Progress</option>
                                <option>Done</option>
                            </select>
                        </div>
                        <div class="priority-select">
                            <label>项目优先级</label>
                            <select>
                                <option>高</option>
                                <option>中</option>
                                <option>低</option>
                            </select>
                        </div>
                    </div>

                    <div class="milestone-table">
                        <table>
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>里程碑</th>
                                    <th>负责人</th>
                                    <th>截止日期</th>
                                    <th>状态</th>
                                    <th>优先级</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- 表格内容将通过JS动态生成 -->
                            </tbody>
                        </table>
                    </div>

                    <div class="work-notes">
                        <textarea placeholder="在这里填写今天的工作记录"></textarea>
                        <div class="button-group">
                            <button class="btn submit">提交</button>
                            <button class="btn add-milestone">添加里程碑</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html> 